<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';



const word = ref("");
const dst = ref("");
const wordId = ref(0);

onMounted(() => {
  const searchParams = new URLSearchParams(window.location.search);
  const wordParam = searchParams.get('word');
  const dstParam = searchParams.get('dst');
  const wordIdParam = searchParams.get('wordId');

  if(wordParam){
    word.value = wordParam;
  }

  if(dstParam){
    dst.value = dstParam;
  }

  if(wordIdParam){
    wordId.value = wordIdParam;
  }
});

function editWord(){
  axios.post('http://127.0.0.1:5001/updateWord',{
    wordId : wordId.value,
    word : word.value,
    dst : dst.value,
  },{
      headers:{
          'Content-Type':'application/x-www-form-urlencoded'
      }
  })
  .then(function (response) {

      if(response.data.success == 'true'){
        alert("修改成功");
      }else{
        alert("修改失败");
      }
  })
  .catch(function (error) {
    alert("修改失败");
    console.log(error);
  });

}

function delWord(){
  axios.post('http://127.0.0.1:5001/delWord',{
    wordId : wordId.value,
  },{
      headers:{
          'Content-Type':'application/x-www-form-urlencoded'
      }
  })
  .then(function (response) {
      if(response.data.success == 'true'){
        alert("删除成功");
      }else{
        alert("删除失败");
      }
  })
  .catch(function (error) {
    alert("删除失败");
    console.log(error);
  });

}

</script>

<template>
  <header>
  </header>

  <main>
    <p>单词</p>
    <input type="text" v-model="word">
    <p>中文</p>
    <textarea v-model="dst"></textarea>
    <div>
      <button @click="editWord">修改</button>
      <button @click="delWord">删除</button>
    </div>
  </main>

  <footer>

  </footer>
</template>

<style scoped>

input {
  display: block;
  width: 50%;
}
textarea {
  display: block;
  width: 50%;
}


</style>
